<!-- 创建时间: 2019年10月16日 星期三 14:16 滑动验证组件 -->
<template>
    <div class="slider_container">
        <div class="mui-input-group slider">
            <label class="form-inline">
                <label>拖动完成验证</label>
                <div class="form-inline-input">
                    <div class="code-box" id="code-box">
                        <!-- <input type="text" name="code" class="code-input" /> -->
                        <p></p>
                        <span>
                            <i class="mui-icon mui-icon-bars"></i>
                        </span>
                    </div>
                </div>
            </label>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import mui from "../../lib/MUI/dist/js/mui.js";
import { Indicator } from "mint-ui";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            resetSlider: ""
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        parentmsg: function(newval) {
            if (newval) {
                this.resetSlider();
            }
        }
    },
    props: ["parentmsg"],
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        function getOffset(box, direction) {
            var setDirection = direction == "top" ? "offsetTop" : "offsetLeft";
            var offset = box[setDirection];
            var parentBox = box.offsetParent;
            while (parentBox) {
                offset += parentBox[setDirection];
                parentBox = parentBox.offsetParent;
            }
            parentBox = null;
            return parseInt(offset);
        }

        function moveCode(_this) {
            var box = document.querySelector("#code-box"),
                progress = box.querySelector("p"),
                codeInput = box.querySelector(".code-input"),
                evenBox = box.querySelector("span");

            //默认事件
            var boxEven = ["mousedown", "mousemove", "mouseup"];
            //改变手机端与pc事件类型
            if (typeof document.ontouchstart == "object") {
                boxEven = ["touchstart", "touchmove", "touchend"];
            }

            var goX, offsetLeft, deviation, evenWidth, endX;

            function moveFn(e) {
                e.preventDefault();
                e =
                    boxEven["0"] == "touchstart"
                        ? e.touches[0]
                        : e || window.event;

                endX = e.clientX - goX;
                endX = endX > 0 ? (endX > evenWidth ? evenWidth : endX) : 0;

                if (endX > evenWidth * 0.8) {
                    progress.innerText = "松开验证";
                    progress.style.backgroundColor = "#66CC66";
                } else {
                    progress.innerText = "";
                    progress.style.backgroundColor = "#FFFF99";
                }

                progress.style.width = endX + deviation + "px";
                progress.style.margin = "0px";
                evenBox.style.left = endX + "px";
            }

            function removeFn() {
                document.removeEventListener(boxEven["2"], removeFn, {
                    passive: false
                });
                document.removeEventListener(boxEven["1"], moveFn, {
                    passive: false
                });

                if (endX > evenWidth * 0.8) {
                    _this.$http.post("loginCode").then(
                        response => {
                            _this.$emit("fun", true, response.bodyText);
                            progress.innerText = "验证成功";
                        },
                        response => {
                            progress.innerText = "验证失败";
                            progress.style.backgroundColor = "red";
                            // mui.alert(response.body.message);
                        }
                    );

                    progress.style.width = evenWidth + deviation + "px";
                    progress.style.margin = "0px";
                    evenBox.style.left = evenWidth + "px";

                    evenBox.onmousedown = null;
                } else {
                    progress.style.width = "0px";
                    evenBox.style.left = "0px";
                }
            }

            evenBox.addEventListener(
                boxEven["0"],
                function(e) {
                    e =
                        boxEven["0"] == "touchstart"
                            ? e.touches[0]
                            : e || window.event;

                    (goX = e.clientX),
                        (offsetLeft = getOffset(box, "left")),
                        (deviation = this.clientWidth),
                        (evenWidth = box.clientWidth - deviation),
                        endX;

                    document.addEventListener(boxEven["1"], moveFn, {
                        passive: false
                    });

                    document.addEventListener(boxEven["2"], removeFn, {
                        passive: false
                    });
                },
                false
            );

            _this.resetSlider = function() {
                evenBox.removeAttribute("style");
                progress.removeAttribute("style");
            };
        }
        moveCode(this);
    }
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../css/slider.css");
.slider_container {
    .mui-input-group.slider {
        display: flex;
        justify-content: center;
        margin: 16px 0px;
        box-shadow: 0 0 3px lightgray;
    }
    .slider:after,
    .slider:before {
        height: 0px;
    }
}
</style>